<!--
 * @Author: lzeng
 * @Date: 2020-05-20 09:18:10
 * @description: 我的好友列表
-->
<template>
  <base-page-view class-name="page-container">
    <view class="main">
      <view class="head_panel">
        <view class="myInviteArrive">
          <view class="title">我的邀请奖励</view>
          <view class="remake" @click="message(1)">
            <text>{{vipArriveData.question}}</text>
            <uni-icons class="help_icon" type="help" size="12" color="#FACDD3"></uni-icons>
          </view>
        </view>
        <view class="moneyGroup">
          <view class="item vipCard" @click="jump('vipCard')">
            <view class="num">{{vipArriveData.member_card_num}}</view>
            <view class="desc">会员卡</view>
          </view>
          <view class="line"></view>
          <view class="item arrive" @click="jump('arrive')">
            <view class="num">{{filters.formatMoney(vipArriveData.obtained_reward)||'0.00'}}</view>
            <view class="desc">已到账奖励</view>
          </view>
          <view class="line"></view>
          <view class="item noArrive" @click="message(2)">
            <view class="num">{{filters.formatMoney(vipArriveData.transit_reward)||'0.00'}}</view>
            <view class="desc">在途奖励</view>
          </view>
        </view>
        </view>
        <view class="tab" :style="{position:tabFixedFlag?'fixed':'',top:tab_top_h+'px'}">
          <tab :current="current" :values="tabItems" @clickItem="onClickItem" :arrows="arrows" styleType="text"
            activeColor="#000000"></tab>
        </view>
      <view class="content">
        <view v-show="current === 0" class="tab_item">
          <view class="myInvite" :style="{'background-color':nomore_invite&&inviteList.length<1?'transparent':'white'}">
            <view v-if="inviteList.length > 0" class="buddy_group" v-for="(item, index) in inviteList" :key="index">
              <view class="buddy_item">
                <view class="item_head">
                  <view class="head_group" @click.stop="callPhone(item)">
                    <b-image class="head_img" width="88" height="88"
                      :src="item.head_img||'https://asset-uat.bisinuolan.cn/bixuan_uni/images/mine/touxiang.png'" />
                    <b-image class="phone_log" width="36" height="36"
                      :src="'https://asset-uat.bisinuolan.cn/bixuan_uni/images/mine/phone_log.png'"
                      />
                  </view>
                </view>
                <view class="item_body">
                  <view class="userName">
                    <text>{{item.nickname}}</text>
                    <view class="level_group">
                      <view class="level">
                        <view v-if="item.level == 0" class="level_sign">普</view>
                        <view v-if="item.level == 1" class="level_sign">V</view>
                        <view v-if="item.level == 2" class="level_sign">钻</view>
                        <view v-if="item.level == 3" class="level_sign">董</view>
                      </view>
                    </view>
                  </view>
                  <view class="userInfo">
                    <text>{{item.mobile}}</text><br/>
                    <text>最近登录{{formatDate(item.last_login_time*1000, 'yyyy-MM-dd HH:mm:ss')}}</text>
                  </view>
                </view>
                <view class="item_foot" @click="buddy_floor(item, index)">
                  <uni-icons :type="inviteFloorFlags[index][index]?'arrowup':'arrowdown'"></uni-icons>
                </view>
              </view>
              <view v-if="inviteFloorFlags.length > 0&&inviteFloorFlags[index][index]&&item.reward_info!=null"
                class="buddy_hide_floor">
                <!-- <view v-if="userInfo.current_member_card_type == 2 || userInfo.current_member_card_type == 3&&item.level!=3"
                  class="progress">
                  <cwg-progress :money="''+item.reward_info.obtained_reward" :progressHeight="8"
                    bottomBackground="#f5f5f5" firstBackground="linear-gradient(to right, #F38192, #E21838)"
                    :progress="item.reward_info.progress_rate" :total="''+item.reward_info.all_reward" :borderRadius="20">
                  </cwg-progress>
                </view> -->
                <!-- <view v-if="item.reward_info.mission_infos" class="buddy_operator">
                  <view v-if="userInfo.current_member_card_type == 2 || userInfo.current_member_card_type == 3&&item.level!=3"
                    class="buddy_article" v-for="(item_op, index_op) in item.reward_info.mission_infos" :key="index_op">
                    <view class="article">
                      <view class="title">{{item_op.reward_text}}</view>
                      <view class="desc">{{item_op.reward_tips}}</view>
                    </view>
                    <view class="article_op">
                      <view class="btn_group">
                        <button v-if="item_op.status == 0" class="btn undone" size="mini" type="default"
                          @click="showSharePop('remind_buddy', item_op)">提醒好友</button>
                        <button v-if="item_op.status == 1" class="btn done" size="mini" type="default">已完成</button>
                        <button v-if="item_op.status == 2" class="btn expired" size="mini" type="default">已过期</button>
                      </view>
                      <view v-if="item.level != 0&&item.level != 1&&item_op.remaining_timestamp!=0" class="time">
                        剩余{{item_op.remaining_timestamp|timer}}</view>
                    </view>
                  </view>
                  <view class="buddy_foot">
                    <view>邀请({{item.inviteCount||0}})</view>
                    <view>好友({{item.childrenCount||0}})</view>
                  </view>
                </view> -->
                <view v-if="item.reward_info.mission_infos" class="buddy_operator">
                  <view v-if="userInfo.current_member_card_type == 2 || userInfo.current_member_card_type == 3&&item.level!=3" class="buddy_article_list">
                    <view class="buddy_article" v-for="(item_op, index_op) in item.reward_info.mission_infos" :key="index_op">
                      <view class="article">
                        <view class="title">{{item_op.reward_text}}</view>
                        <view class="desc">{{item_op.reward_tips}}</view>
                      </view>
                      <view class="article_op">
                        <view class="btn_group">
                          <button class="btn undone" size="mini" type="default"
                            @click="showSharePop('remind_buddy', item_op)">提醒好友</button>
                        </view>
                        <!-- <view v-if="item.level != 0&&item.level != 1&&item_op.remaining_timestamp!=0" class="time">
                          剩余{{item_op.remaining_timestamp|timer}}</view> -->
                      </view>
                    </view>
                  </view>
                  <view class="buddy_foot">
                    <view>邀请({{item.inviteCount}})</view>
                    <view>好友({{item.childrenCount}})</view>
                  </view>
                </view>
              </view>
              <view v-if="inviteFloorFlags[index][index]&&index!=inviteList.length-1" style="height: 10rpx;background-color: #F5F5F5;"></view>
            </view>
            <view v-if="nomore_invite&&inviteList.length<1" class="empty_view">
              <image src="/static/images/commission/commission-empty.png" class="empty_img" />
              <view class="tit">暂无任何内容</view>
            </view>
            <view v-if="nomore_invite&&inviteList.length>0" class="nomore">暂无更多数据~</view>
          </view>
        </view>
        <view v-show="current === 1">
          <view class="myInvite" :style="{'background-color':nomore_buddy&&buddyList.length<1?'transparent':'white'}">
            <view class="buddy_group" v-for="(item, index) in buddyList" :key="index">
              <view class="buddy_item">
                <view class="item_head">
                  <view class="item_head">
                    <b-image class="head_img" width="88" height="88"
                      :src="item.head_img||'https://asset-uat.bisinuolan.cn/bixuan_uni/images/mine/touxiang.png'" />
                  </view>
                </view>
                <view class="item_body">
                  <view class="userName">
                    <text>{{item.nickname}}</text>
                    <view class="level_group">
                      <view class="level">
                        <view v-if="item.level == 0" class="level_sign">普</view>
                        <view v-if="item.level == 1" class="level_sign">V</view>
                        <view v-if="item.level == 2" class="level_sign">钻</view>
                        <view v-if="item.level == 3" class="level_sign">董</view>
                      </view>
                    </view>
                  </view>
                  <view class="userInfo">
                    <text>{{item.mobile}}</text><br/>
                    <text>最近登录{{formatDate(item.last_login_time*1000, 'yyyy-MM-dd HH:mm:ss')}}</text>
                  </view>
                </view>
                <view class="item_foot" @click="buddy_floor(item, index)">
                  <uni-icons :type="buddyFloorFlags[index][index]?'arrowup':'arrowdown'"></uni-icons>
                </view>
              </view>
              <view v-if="buddyFloorFlags.length > 0&&buddyFloorFlags[index][index]" class="buddy_hide_floor">
                <view class="buddy_operator">
                  <view class="buddy_foot">
                    <view>邀请({{item.inviteCount}})</view>
                    <view>好友({{item.childrenCount}})</view>
                  </view>
                </view>
              </view>
              <view v-if="buddyFloorFlags[index][index]&&index!=buddyList.length-1" style="height: 10rpx;background-color: #F5F5F5;"></view>
            </view>
            <view v-if="nomore_buddy&&buddyList.length<1" class="empty_view">
              <image src="/static/images/commission/commission-empty.png" class="empty_img" />
              <view class="tit">暂无任何内容</view>
            </view>
            <view v-if="nomore_buddy&&buddyList.length>0" class="nomore">暂无更多数据~</view>
          </view>
        </view>
      </view>
      <view class="btn_group_foot">
        <button class="btn btn_invite_buddy" type="default" @click="showSharePop('')">邀请好友</button>
      </view>
    </view>
    <base-popup :show="pShow" :show-close="false" type="top" :has-scroll="true" :mask="true" :mask-close="true"
      @close="closePopup">
      <view class="propClass">
        <view class="p-30">
          <view class="title">时间筛选</view>
          <view class="search">
            <view v-for="(tit,index) in searchTit" :key="index" class="searchTit" :class="{active2:active2==index}"
              @click="chooseTimeTab(index)">{{ tit }}</view>
          </view>
          <view class="pickerTit">选择时间</view>
          <view class="pickerView">
            <view class="pickerTime" :class="{aniPicker:startAniPicker}">
              <picker mode="date" :value="startTimeP" :start="startDate" :end="endDate" fields="month"
                @change="bindstartDateChange">
                <view class="uni-input">{{ startTimeP }}</view>
              </picker>
            </view>
            <view style="color: #F5F5F5;margin: 0 20rpx;display: flex;align-items: center;">—</view>
            <view class="pickerTime" :class="{aniPicker:endAniPicker}">
              <picker mode="date" :value="endTimeP" :start="startDate" :end="endDate" fields="month"
                @change="bindendDateChange">
                <view class="uni-input">{{ endTimeP }}</view>
              </picker>
            </view>
          </view>
        </view>
        <view class="chooseButton">
          <view class="resetBtn sureBtn" @click="resetBtn">重置</view>
          <view class="sureBtn" @click="sureBtn">确认</view>
        </view>
      </view>
    </base-popup>
    <share ref="sharePop" :share-option="shareOption" :shareTypes="shareTypes" @btnClick="shareBtnClick" />
  </base-page-view>
</template>

<script>
  import {
    format,
    startOfMonth,
    endOfMonth,
    startOfDay,
    endOfDay
  } from 'date-fns'
  import tab from './component/tab.vue'
  import cwgProgress from "./component/cwg-progress.vue"
  import share from '@/components/share/index'
  import {
    filters
  } from '@/utils/tools.js'
  import {
    mapState
  } from 'vuex'
  export default {
    components: {
      tab,
      cwgProgress,
      share
    },
    data() {
      return {
        rewardType: 1, //跳转类型
        shareTypes: [5], //分享选项
        equipment: '', //当前设备
        tab_top_h: 0, //内容自适应高度
        head_panel_h: 0, //显示栏高度
        tabFixedFlag: false,
        statusH: 0, //状态栏高度
        tabItems: ['我的邀请', '我的好友', '筛选'],
        current: 0, //tab index
        buddyFloorFlags: [],
        inviteFloorFlags: [],
        arrows: [false, false, true],
        inviteList: [], //邀请列表
        buddyList: [], //好友列表
        vipArriveData: {}, //会员奖励
        // 分享模块
        showShareIcon: true,
        shareTimer: null,
        shareBg: 'https://asset-uat.bisinuolan.cn/bixuan_uni/images/share/',
        shareOption: {}, // 分享自定义设置
        //筛选模块
        nomore_invite: false,
        nomore_buddy: false,
        pShow: false,
        searchTit: ['全部', '本月', '上月', '最近三个月', '最近6个月', '最近1年'],
        active2: 'no',
        startTimeP: '开始时间',
        endTimeP: '结束时间',
        startTimeS: '',
        endTimeS: '',
        startAniPicker: false,
        endAniPicker: false,
        pageNo_invite: 1,
        pageSize_invite: 10,
        pageNo_buddy: 1,
        pageSize_buddy: 10,
        filters: filters
      }
    },
    computed: {
      startDate() {
        return this.getDate('start')
      },
      endDate() {
        return this.getDate('end')
      },
      ...mapState([
        'userInfo'
      ])
    },
    onPullDownRefresh() {
      this.pageNo_invite = 1
      this.inviteList = []
      this.nomore_invite = false
      this.pageNo_buddy = 1
      this.buddyList = []
      this.nomore_buddy = false
      this.init(false)
    },
    onReachBottom() {
      if (this.current == 0) {
        if (this.nomore_invite) return
        this.pageNo_invite += 1
      } else if (this.current == 1) {
        if (this.nomore_buddy) return
        this.pageNo_buddy += 1
      }
      this.app_interactive_data(this.current)
    },
    onPageScroll(e) {
      if (e.scrollTop >= this.head_panel_h) {
        this.tabFixedFlag = true
      } else {
        this.tabFixedFlag = false
      }
    },
    onShow() {
      if(!this.token){
        this.$navigateTo('/pages/login/index');
        return;
      }
      this.pageNo_invite = 1
      this.inviteList = []
      this.nomore_invite = false
      this.pageNo_buddy = 1
      this.buddyList = []
      this.nomore_buddy = false
      this.init()
      let that = this
      this.$nextTick(() => {
        uni.getSystemInfo({
          success: function(res) {
            // #ifdef H5
            that.statusH = res.windowTop
            that.tab_top_h = res.windowTop
            // #endif
            // #ifdef MP-WEIXIN
            that.statusH = res.statusBarHeight+25
            // #endif
            let info = uni.createSelectorQuery().select(".head_panel");
            info.boundingClientRect(function(data) {
              that.head_panel_h = data.height
            }).exec()
          }
        });
      })
    },
    onShareAppMessage(res) {
      return this.$queryShareOption(res, this.shareOption)
    },
    filters: {
      timer(stamp) {
        if (stamp <= 0) {
          stamp = 0
        }
        var second = Math.floor(stamp / 1000);
        var day = Math.floor(second / 3600 / 24);
        var hr = Math.floor(second / 3600 % 24);
        var min = Math.floor(second / 60 % 60);
        var sec = Math.floor(second % 60);
        return day + "天" + hr + "小时" + min + "分钟" + sec + "秒";
      }
    },
    methods: {
      callPhone(item) {
        const mention = uni.getStorageSync('__pboneCall_mention__')
        let msg = ''
        // 如果已经提示过了
        if (mention) {
          msg = '请使用登录的手机号码进行拨打，否则无法通话'
        } else {
          msg = '本次通话将被录音，是否需要继续拨打？（请使用登录的手机号码进行拨打，否则无法通话）'
          uni.setStorageSync('__pboneCall_mention__', true)
        }
        this.$gc.$message({
          content: msg,
          title: '温馨提示',
          type: 'richText',
          showMessage: true,
          showCancel: true,
          align: 'center',
          confirm: async () => {
            const res = await this.$api.commissionApi.getPhoneNumber({
              targetUserId: item.user_id
            })
            if (res.data && res.data.success === true) {
              uni.makePhoneCall({
                phoneNumber: res.data.virtual_mobile
              })
            } else {
              uni.showToast({
                title: res.data.error_message,
                icon: 'none'
              })
            }
          }
        })
      },
      formatDate(date, pattern = 'yyyy-MM-dd HH:mm:ss') {
        if (date) {
          let originDate = typeof date === 'string' ? new Date(date) : date
          const str = format(originDate, pattern)
          return str
        }
        return '-'
      },
      jump(type) {
        switch (type) {
          case 'vipCard':
            this.$navigateTo('/pagesMine/myBuddy/myVip/index')
            break
          case 'arrive':
            this.$navigateTo('/pagesMine/myBuddy/reward/arrive')
            break
          default:
        }
      },
      init(showLoading) {
        this.$api.mineApi.myRewardInfo().then(res => {
          if (res.code == 0) {
            this.vipArriveData = res.data
            this.tabItems.splice(0, 1, `我的邀请(${this.vipArriveData.invite_total})`);
            this.tabItems.splice(1, 1, `我的好友(${this.vipArriveData.friends_total})`);
          }
        })
        this.app_interactive_data(0, showLoading)
        this.app_interactive_data(1, showLoading)
        setTimeout(function() {
          uni.stopPullDownRefresh()
        }, 500)
      },
      buddy_floor(item, index) {
        if (this.current == 0) {
          this.inviteFloorFlags[index][index] = this.inviteFloorFlags[index][index] ? false : true
          if (this.inviteFloorFlags[index][index]) {
            this.$api.mineApi.getChildStatistic({
              user_id: item.user_id
            }).then(res=>{
              if (res.code == 0) {
                this.inviteList[index].inviteCount = res.data.invite_count
                this.inviteList[index].childrenCount = res.data.children_count
              }
            })
          }
        } else if (this.current == 1) {
          this.buddyFloorFlags[index][index] = this.buddyFloorFlags[index][index] ? false : true
          if (this.buddyFloorFlags[index][index]) {
            this.$api.mineApi.getChildStatistic({
              user_id: item.user_id
            }).then(res=>{
              if (res.code == 0) {
                this.buddyList[index].inviteCount = res.data.invite_count
                this.buddyList[index].childrenCount = res.data.children_count
              }
            })
          }
        }
      },
      onClickItem(index) {
        if (this.current !== index.currentIndex) {
          if (index.currentIndex == 2) {
            this.searchPopup()
            return
          }
          this.current = index.currentIndex
          this.pageNo_invite = 1
          this.inviteList = []
          this.nomore_invite = false
          this.pageNo_buddy = 1
          this.buddyList = []
          this.nomore_buddy = false
          this.resetBtn()
          this.app_interactive_data(this.current)
        }
      },
      //筛选
      chooseTimeTab(index) {
        this.active2 = index
        this.startTimeP = '开始时间'
        this.endTimeP = '结束时间'
      },
      closePopup() {
        this.$set(this, 'pShow', false)
      },
      async app_interactive_data(type, showLoading) {
        if (this.startTime) {
          this.startTime = this.startTime.replace(/-/g, '/')
          this.endTime = this.endTime.replace(/-/g, '/')
        }
        this.$api.mineApi.getFriends({
          pageNo: type == 0 ? this.pageNo_invite : this.pageNo_buddy,
          pageSize: type == 0 ? this.pageSize_invite : this.pageSize_buddy,
          type: type == 0 ? 1 : 2,
          userId: this.userInfo.uid,
          startTime: new Date(this.startTime).getTime()||"",
          endTime: new Date(this.endTime).getTime()||""
        }, showLoading).then(res => {
          if (res.code === 0) {
            setTimeout(function() {
              uni.stopPullDownRefresh()
            }, 500)
            const that = this
            //绑定我的邀请和我的好友
            function getChild(user_id, type) {
              that.$api.mineApi.getChildStatistic({
                user_id: user_id
              }).then(res=>{
                if (res.code == 0) {
                  if (type == 0) {
                    that.inviteList[0].inviteCount = res.data.invite_count
                    that.inviteList[0].childrenCount = res.data.children_count
                  } else if (type == 1) {
                    that.buddyList[0].inviteCount = res.data.invite_count
                    that.buddyList[0].childrenCount = res.data.children_count
                  }
                }
              })
            }
            if (type == 0) {
              let data = res.data.friends_info_v_o_s
              data.forEach((item, index) => {
                data[index].inviteCount = 0
                data[index].childrenCount = 0
                let obj = new Object()
                obj[that.inviteList.length + index] = that.inviteList.length + index == 0 ? true : false
                that.inviteFloorFlags.push(obj)
              })
              this.inviteList = this.inviteList.concat(data)
              //邀请下级初始化
              if(data.length>0){
                getChild(data[0].user_id, 0)
              } else {
                this.nomore_invite = true
              }
              if (data.length < this.pageSize_invite) {
                this.nomore_invite = true
              }
            } else if (type == 1) {
              let data = res.data.friends_info_v_o_s
              data.forEach((item, index) => {
                data[index].inviteCount = 0
                data[index].childrenCount = 0
                let obj = new Object()
                obj[that.buddyList.length + index] = that.buddyList.length + index == 0 ? true : false
                that.buddyFloorFlags.push(obj)
              })
              this.buddyList = this.buddyList.concat(data)
              //好友下级初始化
              if(data.length>0){
                getChild(data[0].user_id, 1)
              } else {
                this.nomore_invite = true
              }
              if (data.length < this.pageSize_invite) {
                this.nomore_buddy = true
              }
            }
          }
        })
      },
      sureBtn() {
        let that = this

        function typeChoise() {
          if (that.current == 0) {
            that.inviteList = []
            that.pageNo_invite = 1
            that.nomore_invite = false
            that.inviteFloorFlags = []
          } else if (that.current == 1) {
            that.buddyList = []
            that.pageNo_buddy = 1
            that.nomore_buddy = false
            that.buddyFloorFlags = []
          }
        }
        if (this.active2 !== 'no') {
          if (this.active2 === 0) {
            this.startTime = ''
            this.endTime = ''
          } else if (this.active2 === 1) {
            this.startTime = this.getTabMonth(0, 'first')
            this.endTime = this.getTabMonth(0, 'last')
          } else if (this.active2 === 2) {
            this.startTime = this.getTabMonth(1, 'first')
            this.endTime = this.getTabMonth(1, 'last')
          } else if (this.active2 === 3) {
            this.startTime = this.getTabMonth(2, 'first')
            this.endTime = this.getTabMonth(0, 'last')
          } else if (this.active2 === 4) {
            this.startTime = this.getTabMonth(5, 'first')
            this.endTime = this.getTabMonth(0, 'last')
          } else if (this.active2 === 5) {
            this.startTime = this.getTabMonth(11, 'first')
            this.endTime = this.getTabMonth(0, 'last')
          } else if (this.active2 === 'reset') {
            this.startTime = ''
            this.endTime = ''
          }
          typeChoise()
          this.app_interactive_data(that.current)
        } else {
          if (this.startTimeP === '开始时间' && this.endTimeP !== '结束时间') {
            this.startAniPicker = true
            setTimeout(() => {
              this.startAniPicker = false
            }, 2000)
            return false
          }
          if (this.endTimeP === '结束时间' && this.startTimeP !== '开始时间') {
            this.endAniPicker = true
            setTimeout(() => {
              this.endAniPicker = false
            }, 2000)
            return false
          }
          if (this.endTimeP === '结束时间' && this.startTimeP === '开始时间') {
            this.startTime = ''
            this.endTime = ''
          } else {
            this.startTime = `${this.startTimeP}-01 00:00:00`
            let date = new Date(this.endTimeP)
            date = new Date(date.getFullYear(), date.getMonth() + 1, 0) // 获取选择月份的最后一天
            this.endTime = `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()} 23:59:59`
          }
          typeChoise()
          this.app_interactive_data(that.current)
        }
        this.pShow = false
      },
      resetBtn() {
        this.active2 = 'reset'
        this.startTimeP = '开始时间'
        this.endTimeP = '结束时间'
        this.startTime = ''
        this.endTime = ''
      },
      getTabMonth(num, type = 'first') { // first: 月份第一天、last:月份最后一天
        const date = new Date()
        let year = date.getFullYear()
        let month = date.getMonth() + 1
        month = month - num
        if (month <= 0) {
          month = 12 + month
          if (month < 10) {
            month = '0' + month
          }
          year = year - 1
        } else if (month < 10) {
          month = '0' + month
        }
        if (type === 'first') {
          return `${year}-${month}-01 00:00:00`
        } else if (type === 'last') {
          const date = new Date(year, month, 0)
          return `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()} 23:59:59`
        }
        return `${year}-${month}`
      },
      searchPopup() {
        this.pShow = true
      },
      getDate(type) {
        const date = new Date()
        let year = date.getFullYear()
        let month = date.getMonth() + 1
        if (type === 'start') {
          year = year - 10
        }
        month = month > 9 ? month : '0' + month
        return `${year}-${month}`
      },
      bindstartDateChange: function(e) {
        this.startTimeS = new Date(e.target.value).getTime()
        if ((this.startTimeS > this.endTimeS) && this.endTimeS !== '') {
          this.startAniPicker = true
          setTimeout(() => {
            this.startAniPicker = false
          }, 2000)
          return false
        }
        this.startTimeP = filters.parseTime(this.startTimeS, '{y}-{m}')
        this.active2 = 'no'
        // if (this.endTimeP !== '结束时间') {

        // }
      },
      bindendDateChange: function(e) {
        this.endTimeS = new Date(e.target.value).getTime()
        if ((this.startTimeS > this.endTimeS) && this.startTimeS !== '') {
          this.endAniPicker = true
          setTimeout(() => {
            this.endAniPicker = false
          }, 2000)
          return false
        }
        this.endTimeP = filters.parseTime(new Date(e.target.value).getTime(), '{y}-{m}')
        // if (this.startTimeP !== '开始时间') {

        // }
        this.active2 = 'no'
      },
      // 点击分享按钮
      showSharePop(type, item) {
        if (type == 'remind_buddy') {
          //提醒好友分享图片逻辑
          if (item.reward_type == 1) {
            this.shareOption.share_url = '/pagesMember/pay/index?type=diamond'
            this.shareOption.share_list = [{
                pic: this.shareBg + 'share_01.jpg',
                titleArr: [
                  item.share_tips
                ]
              }
            ]
          } else if (item.reward_type == 2) {
            this.shareOption.share_url = '/pagesMine/myBuddy/myVip/index'
            this.shareOption.share_list = [{
                pic: this.shareBg + 'share_02.jpg',
                titleArr: [
                  item.share_tips
                ]
              }
            ]
          }
        } else if (type == '') {
          this.shareOption.share_url = '/pages/home/index'
          this.shareOption.share_list = [{
              pic: this.shareBg + 'share_01.jpg',
              titleArr: [
                '选择，大于努力',
                '加入碧选',
                '自购分享多赚一点'
              ]
            },
            {
              pic: this.shareBg + 'share_02.jpg',
              titleArr: [
                '选择，大于努力',
                '加入碧选',
                '自购分享多赚一点'
              ]
            },
            {
              pic: this.shareBg + 'share_03.jpg',
              titleArr: [
                '选择，大于努力',
                '加入碧选',
                '自购分享多赚一点'
              ]
            }
          ]
        }
        this.$trackSDK.track('bx.home.button.click', '', {
          title: '分享按钮'
        })
        if (this.token) {
          this.$refs.sharePop.show(this.shareOption)
        } else {
          this.$navigateTo('/pages/login/index')
        }
      },
      shareBtnClick(btnText) {
        this.$trackSDK.track('bx.home.button.click', '', {
          title: btnText
        })
      },
      message(type) {
        let message = ''
        let title = ''
        if (type == 1) {
          title = '邀请规则'
          // message = '1.成为钻石会员或董事会员\n2.成为钻石会员后邀请直推好友开通钻石会员，立即得10元现金和10张VIP会员卡\n3.好友成为钻石会员后，一周内累计购买1000，再得200现金和10张VIP会员卡'
          message = this.vipArriveData.rule
          message = message.replace(/\n/g, '<br/>')
        } else if (type == 2) {
          title = '在途奖励说明'
          // message = '在途奖励指的是您提醒直推好友，满足第一次开通钻石会员和开通钻石会员后一周内购买商品满1000元。您即将可能获取的现金奖励总金额。'
          message = this.vipArriveData.transit_reward_exp
          message = message.replace(/\n/g, '<br/>')
        }
        this.$gc.$message({
          content: message,
          type: 'richText',
          title: title,
          showMessage: true,
          showCancel: false,
          confirmText: '好哒',
          align: 'left',
          confirm: () => {}
        })
      },
    }
  }
</script>

<style lang="scss">
  @import "./index.scss";
  /deep/ .propClass .pickerView .pickerTime {
    margin-right: 0 !important;
  }
  /deep/ .empty_view {
    margin-top: calc(50% - 120px / 2 - 14px)
  }

  .expired,
  .done {
    background-image: none;
    background-color: #ccc !important;
  }

  .btn_group_foot {
    display: flex;
    justify-content: center;
    background-color: #fff;
    padding: 10rpx 30rpx 20rpx;
    position: fixed;
    bottom: 0;
  }

  .btn_invite_buddy {
    width: 691rpx;
    height: 84rpx;
    font-size: 31rpx;
    color: #F7F5F6 !important;
  }

  .buddy_foot {
    display: flex;
    justify-content: space-around;
    padding: 21rpx;
    font-size: 29rpx;
    border-bottom: 1px solid #F5F5F5;
    margin: 0 50rpx;
  }

  .myInvite {
    background-color: #fff;
    margin-bottom: 140rpx;
    // #ifdef H5
    margin-bottom: 240rpx;
    // #endif
  }

  .progress {
    padding: 34rpx 45rpx;
  }

  .tab {
    background-color: #fff;
    padding: 20rpx 0;
    transform: translateY(-2rpx);
    width: 100%;
    z-index: 9;
  }

  .uni-collapse-cell {
    border: none !important;
  }

  .buddy_item {
    margin: 10rpx 30rpx 0rpx;
    padding: 20rpx 20rpx;
    border-bottom: 1px solid #F5F5F5;
    display: flex;
    justify-content: space-between;

    .item_head {
      flex: 2;

      .head_group {
        width: 88rpx;
        height: 88rpx;
        position: relative;

        .head_img {
          border-radius: 100%;
        }

        .phone_log {
          position: absolute;
          bottom: -5rpx;
          right: -5rpx;
          // #ifdef MP-WEIXIN
          bottom: -12rpx;
          // #endif
        }
      }

      .head_img {
        border-radius: 100%;
        .bx-image {
          border-radius: 100%;
        }
      }
    }

    .item_foot {
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: center;
    }

    .item_body {
      flex: 7;
      display: flex;
      flex-direction: column;
      justify-content: center;

      .userName {
        font-size: 27rpx;
        display: flex;
      }

      .userInfo {
        font-size: 23rpx;
        color: #999999;
      }
      .level_group {
        display: flex;
        align-items: center;
        .level {
          margin-left: 10rpx;
          border: 1px solid #000000;
          width: 26rpx;
          height: 26rpx;
          border-radius: 1rem;
          display: flex;
          justify-content: center;
          align-items: center;
        
          .level_sign {
            font-size: 23rpx;
            transform: scale(.7);
          }
        }
      }
    }
  }
  .buddy_article_list {
    border-bottom: 1px solid #F5F5F5;
  }
  .buddy_article {
    margin: 0rpx 40rpx 20rpx;
    padding-bottom: 20rpx;
    display: flex;
    justify-content: space-between;

    .article {
      display: flex;
      flex-direction: column;
      flex: 2;
      padding: 0 20rpx;
      .title {
        font-size: 31rpx;
        margin: 10rpx 10rpx 10rpx 0;
      }

      .desc {
        font-size: 23rpx;
        color: #999999;
        padding-right: 40rpx;
      }
    }

    .article_op {
      display: flex;
      flex-direction: column;

      .btn_group {
        flex: 2;
        display: flex;
        justify-content: flex-end;
        align-items: center;

        button {
          color: #fff;
          display: flex;
          align-items: center;
          justify-content: center;
        }
      }

      .time {
        flex: 1;
        text-align: center;
        font-size: 23rpx;
        color: #999999;
      }
    }
  }

  .head_img {
    width: 88rpx;
    height: 88rpx;
  }

  .line {
    background-color: #FACDD3;
    width: 1rpx;
    height: 63rpx;
  }

  .myInviteArrive {
    background-color: #E21536;
    color: white;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 68rpx 43rpx 0;

    .title {
      font-size: 37rpx;
    }

    .remake {
      font-size: 25rpx !important;
      color: #FACDD3 !important;

      .help_icon {
        color: #FACDD3 !important;
        vertical-align: bottom !important;
      }
    }
  }

  .moneyGroup {
    background: url(https://asset-uat.bisinuolan.cn/bixuan_uni/images/mine/reward_arrive.png) no-repeat 100%/100%;
    height: 218rpx;
    color: #fff;
    display: flex;
    justify-content: space-around;
    align-items: center;

    .item {
      text-align: center;

      .num {
        font-size: 49rpx;
      }
    }
  }
</style>
